<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
	<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ include file="../../common/base.jsp"%>
<%
	response.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link href="${path }/dist/css/bootstrap.css" rel="stylesheet">
<link href="${path }/dist/css/bootstrap-overrides.css" rel="stylesheet">

<!-- Button -->
<link href="${path }/dist/css/compiled/elements.css" rel="stylesheet">
<!-- libraries -->
<link rel="stylesheet" type="text/css"  href="${path }/dist/css/font-awesome.css">
<!-- this -->
<link rel="stylesheet" type="text/css" href="${path }/dist/css/app.css">
<!-- 右键菜单插件 -->
<link rel="stylesheet" type="text/css" href="${path }/dist/css/smartMenu.css">

<link href='${path }/dist/css/zTreeStyle/zTreeStyle.css' rel='stylesheet' />

<link rel="stylesheet" type="text/css" href="${path }/back/ifrom.css">
<script src="${path }/dist/js/jquery.min.js"></script>
<script src='${path }/dist/js/bootstrap.min.js'></script>
<script src='${path }/dist/js/jquery-smartMenu.js'></script>
<script src='${path }/dist/js/jquery.ztree.core-3.5.js'></script>
<script src='${path }/dist/js/jquery.ztree.excheck-3.5.js'></script>
<script src='${path }/dist/js/jquery.ztree.exedit-3.5.js'></script>
<!--  高冷  用不了 
<script src='${path }/dist/js/formValidator-4.1.3.min.js'></script>
<script src='${path }/dist/js/formValidatorRegex.js'></script>
 -->
<style>
.left_tree{
	height: 400px;
	overflow: auto;
	border: 1px solid #ccc;
	 border-radius: 5px;
}
#pad-wrapper h3{
	font-family: "黑体";
}
.my_modal{
	position: absolute;
	height: 200px;
	width: 250px;
	display:none;
	left: 20%;
	top: 10%;
}
.my_input {
  
  width: 150px;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.my_input:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
</style>
</head>
<bady>
<div id="pad-wrapper">
	<div class="row head">
	<div class="col-md-12">
			<h3>资产类别管理<em><small>左键点击左边目录树出现编辑菜单，右键对右边的列表操作。也可以直接从excel文件导入类别数据。</small></em></h3>
			</div>
	</div>
	<hr>
	<div class="row">
		<div class="col-md-3">
			<div class="row">
				<div class="col-md-12 left_tree">
					<div class="ztree" id="assetstree"></div>
				</div>
				<div class="col-md-12">
					统计部分
				</div>
			</div>
		</div>
		<div class="col-md-9 table-wrapper users-table">
			<div class="row filter-block">
				<div class="pull-right">
					<a class="btn-flat success new-product" id="add"><i class="icon-plus"></i> <span>Add</span></a>
					<%--
					<a class="btn-flat success new-product" id="edit" ><i class="icon-edit"></i> <span>Edit</span></a>
					<a class="btn-flat success new-product" id="remove"><i class="icon-trash"></i><span>Del</span></a>
					 --%>
					<a class="btn-flat success new-product" id="export" href="${path }/downfile!downaccetsclass"><i class="icon-cloud-download"></i><span>Export Exl</span></a>
					<a class="btn-flat success new-product" id="import"><i class="icon-cloud-upload"></i><span>Import Exl</span></a>
					<%--disabled --%>
				</div><!-- 按钮组 -->
			</div>
			<div class="row" style="margin-top: 5px;">
				<div class="col-md-12">
					<table class="table table-hover">
						<thead>
							<tr >
								<th class="col-md-2 sortable" ><span >编号</span ></th>
								<th class="col-md-2 sortable" ><span class="line"></span><span >名称</span></th>
								<th class="col-md-2 sortable"> <span class="line"></span><span >pid</th>
							</tr>
						</thead>
						<tbody id="node_tbody">
							
						</tbody>
				</table>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="my_modal" id="edit_modal">
	<form action="" method="post" id="edit_assetsclass_form">
	    <div class="modal-content ">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="hideMenu()"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">修改类别</h4>
	      </div>
	      <div class="modal-body">
	       		
	       		<p><span style="color: #f00;">*</span>编号：<input type="text" name="ac.ac_coding" maxlength="12" minlength="1" class="my_input" onkeyup="this.value=this.value.replace(/\D/g,'')"/><br>(请输入数字)</p>
	       		<p><span style="color: #f00;">*</span>名称：<input type="text" name="ac.ac_name" maxlength="12" minlength="1" class="my_input"/><br>(请不要输入*&#…@^~!|%\等特殊字符)</p>
	       		<p><span style="color: #f00;">*</span>父项：<input type="text" name="ac.ac_pid" maxlength="12" minlength="1" class="my_input"/><br>(不可为空，不建议修改)</p>
	       		<input type="hidden" name="ac.ac_id">
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" onclick="hideMenu()">Close</button>
	        <button type="button" class="btn btn-primary" id="edit_assetsclass_submit">确认提交</button>
	      </div>
	    </div>
	  </form>
</div>
	<script type="text/javascript">
	
	var setting = {
			view: {
				selectedMulti: false,//多选
				showLine: true,
				nameIsHTML: true
			}, callback : {
				beforeClick : beforeClick,
			},data:{
				simpleData:{
					enable: true,
				}
			}
		};
	var tdmenuData=[
	                [{text: "当前层级新增", func:addnode },
	                 {text: "该层下新增", func:addchildren },
	                 {text: "修改", func:edit },
	                 {text: "删除", func:remove },
	                ],[{text: "完成", func:confirm_submit}]
	               ];
	
	var ztreeobj;
	//当前层级新增
	function addnode(){
		$("#edit_modal input").each(function(i){//清空
			$(this).val("");
		});
		$("#myModalLabel").html("增加员工");
		nodes=ztreeobj.getSelectedNodes();
		$("#edit_modal input[name='ac.ac_pid']").val(nodes[0].id);
		var cityObj = $(this);
		var cityOffset = cityObj.offset();
		$("#edit_modal").css({left:"30%", top:cityOffset.top+cityObj.outerHeight() + "px"});
		$("#edit_modal").fadeIn("fast");
		$("body").bind("mousedown", onBodyDown);
		$("#edit_assetsclass_submit").unbind("click");
		$("#edit_assetsclass_submit").bind("click",{level:$(this).data("level")},add_assetsclass_submit);
		
	}
	//该层下新增
	function addchildren(){
		$("#edit_modal input").each(function(i){//清空
			$(this).val("");
		});
		$("#myModalLabel").html("增加分类");
		$("#edit_modal input[name='ac.ac_pid']").val($(this).data("id"));
		
		var cityObj = $(this);
		var cityOffset = cityObj.offset();
		$("#edit_modal").css({left:"30%", top:cityOffset.top+cityObj.outerHeight() + "px"});
		$("#edit_modal").fadeIn("fast");
		$("body").bind("mousedown", onBodyDown);
		$("#edit_assetsclass_submit").unbind("click");
		//层下新增 level 在+1
		$("#edit_assetsclass_submit").bind("click",{level:($(this).data("level")+1)},add_assetsclass_submit);
	}
	//打开修改框
	function edit(){
		if($(this).hasClass('no_record')){
			alert("别闹，这又不是记录")
			return ;
		}
		$("#myModalLabel").html("修改分类");
		$("td",$(this)).each(function(i){//赋值
			$("#edit_modal input[type='text']").eq(i).val($(this).html());
		});
		$("#edit_modal input[type='hidden']").val($(this).data("id"));
		var cityObj = $(this);
		var cityOffset = cityObj.offset();
		$("#edit_modal").css({left:cityOffset.left+100 + "px", top:cityOffset.top+50 + "px"});
		$("#edit_modal").fadeIn("fast");
		$("body").bind("mousedown", onBodyDown);
		$("#edit_assetsclass_submit").unbind("click");
		$("#edit_assetsclass_submit").bind("click",edit_assetsclass_submit);
	}
	function remove(){
		//alert(ztreeobj.getNodeByParam("id",$(this).data("id"),null).name);
		var node=ztreeobj.getNodeByParam("id",$(this).data("id"),null);
		if(node.id==0){
			alert("不能删除根节点");
			return ;
		}if(node.isParent){
			if(!confirm("确认删除父节点么？删除父节点将会删除父节点下所有子节点")){
				return ;
			}
		}else{
			if(!confirm("确认节点:"+node.name)) return ;
		}
		var from_data=[];
		
		from_data.push({name:"id",value:$(this).data("id")});
		var saveURL = "${path}/back/tree!delAssetsclass?date="+new Date()+"";
		jQuery.post(saveURL,from_data,function(jsonData){
			if(jsonData.info){
				alert(jsonData.text);
			 	window.location.reload();
			}else{
				alert("添加失败：原因\n"+jsonData.text);
			}
		},"json");
	}
	function confirm_submit(){
		
	}
	//节点点击事件
	function beforeClick(treeId, treeNode){
		$.smartMenu.remove();
		var target=$("#node_tbody");
		target.empty();//清空
		if(treeNode.isParent){

			var c=treeNode.children;
			if(c!=null)		
			for(var i=0;i<c.length;i++){//coding 获取孩子节点数据 level要加1
				var tr_obj=$("<tr data-id='"+c[i].id+"' data-level='"+(c[i].level+1)+"'>").appendTo(target);
				$("<td>"+c[i].coding+"</td>").appendTo(tr_obj);
				$("<td>"+c[i].name+"</td>").appendTo(tr_obj);
				$("<td>"+c[i].pId+"</td>").appendTo(tr_obj);
			}
		}else{
			var tr_obj=$("<tr data-id='"+treeNode.id+"' data-level='"+treeNode.level+"'>").appendTo(target);
			$("<td>"+treeNode.coding+"</td>").appendTo(tr_obj);
			$("<td>"+treeNode.name+"</td>").appendTo(tr_obj);
			$("<td>"+treeNode.pId+"</td>").appendTo(tr_obj);
		}
		$("#node_tbody tr").smartMenu(tdmenuData,{name:"tdmenu"});
		return true;
	}
	
	$(document).ready(function() {
		var saveURL = "${path}/back/tree!assetsclasstree?date="+new Date()+"";
		jQuery.post(saveURL,null,function(jsonData){
			ztreeobj=$.fn.zTree.init($("#assetstree"), setting,jsonData);
			var node = ztreeobj.getNodeByParam("id", 0, null);
			ztreeobj.selectNode(node,false);
			beforeClick(node.tId,node);
		},"json");
		$("#add").click(addnode);
		$("#edit_assetsclass_submit").bind("click",edit_assetsclass_submit);
	});
	//新增
	function add_assetsclass_submit(e){
		var fromDom=$(this).closest("form");
		//var name=$("input[name='ac.ac_name']",fromDom);
		//var pid=$("input[name='ac.ac_pid']",fromDom);
		//var coding =$("input[name='ac.ac_coding']",fromDom)
		
		//if(name.val()!=null&&name.val()!=""&&pid.val()!=""&&pid.val()!=null&&coding.val()!=null&&coding.val()!=""){
		if(fromisnotnull(fromDom)){
			var from_data=fromDom.serializeArray();
			
			from_data.push({name:"ac.levelnum",value:e.data.level});
			var saveURL = "${path}/back/tree!addAssetsclass?date="+new Date()+"";
			jQuery.post(saveURL,from_data,function(jsonData){
				if(jsonData.info){
					alert(jsonData.text);
				 	window.location.reload();
				}else{
					alert("添加失败：原因\n"+jsonData.text);
				}
			},"json");
		}
	}
	//修改
	function edit_assetsclass_submit(){
		var fromDom=$(this).closest("form");
		//var name=$("input[name='ac.ac_name']",fromDom);
		//var pid=$("input[name='ac.ac_pid']",fromDom);
		//var coding =$("input[name='ac.ac_coding']",fromDom)
		
		if(fromisnotnull(fromDom)){
			var from_data=fromDom.serializeArray();
			var saveURL = "${path}/back/tree!editAssetsclass?date="+new Date()+"";
			jQuery.post(saveURL,from_data,function(jsonData){
				if(jsonData.info){
					alert(jsonData.text);
				 	window.location.reload();
				}else{
					alert("添加失败：原因\n"+jsonData.text);
				}
			},"json");
		}
	}
	function fromisnotnull(fromdom){
		var  pass =true;
		$("input[type='text']",fromdom).each(function(){
			if($(this).val()==null||$(this).val()==""){
				alert("*为必填项");
				pass =false;
				return false;
			}
		});
		return pass;
	}
	function onBodyDown(event) {
		//alert();
		if (!($(event.target).parents("#edit_modal").length>0)) {
			hideMenu();
		}
	}
	//解除 body绑定
	function hideMenu() {
		$("#edit_modal").fadeOut("fast");
		$("body").unbind("mousedown", onBodyDown);
	}
	</script>
</bady>
</html>